<!--聊天列表组件-->
<template>
  <div class=" w-full bg-base-100 ">
    <div class="sticky top-0 bg-white z-9">
      聊天列表
    </div>
    <!-- 聊天列表 -->
    <table class="table">
      <!-- head -->
      <thead>
      <tr>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <template v-for="it in chatStore.getChatList">
        <!-- row 1 -->
        <tr>
          <td @click="clickInto(it)">
            <div class="flex items-center gap-3">
              <div class="avatar online placeholder">
                <div class="rounded-full w-12">
                  <img :src="it.chatter.avatarUrl" alt="Avatar" oncontextmenu="return false" />
                </div>
              </div>
              <div>
                <div class="font-bold">{{ it.showName }}</div>
              </div>
            </div>
          </td>
        </tr>
      </template>
      </tbody>
    </table>
  </div>
  <MyDialog :title="'搜索用户'" :customSize="{high:'h-2/3',width:'w-full',max:'max-w-3xl'}"  :dialogVisible="dialogVisible" @closed="() => dialogVisible=false">
    <FindUserPanel/>
  </MyDialog>
</template>

<script setup lang="ts">

import {ref} from "vue";
import {useChatStore} from "@/stores/chat.ts";
import MyDialog from "@/components/MyDialog.vue";
import FindUserPanel from "@/views/contacts_components/FindUserPanel.vue";
import {Chatting} from "@/models/contacts.ts";

const emits = defineEmits([
  "intoChat", "closed"
])

const chatStore = useChatStore();


const dialogVisible = ref(false)

const clickInto = (it:Chatting) => {
  console.log(`click chatting: showName=${it.showName}`);
  // activeContact.value = it;
  emits('intoChat',it)
}


const clickAdd = ()=>{
  console.debug("clickAdd...")

  //dialogVisible.value = true
}



// if (chatStore.getContactList.length>0){
//   clickInto(chatStore.getContactList[0])
// }

</script>

<style scoped lang="scss">

</style>